{{template "base/base.html" .}}
{{template "base/base_common.html" .}}
{{define "meta"}}<title>{{.Post.Title}} - {{i18n .Lang "app_name"}}</title>{{end}}
{{define "body"}}
<div class="row">
    <div id="content" class="col-md-9">
        <ol class="breadcrumb">
            <li><a href="{{.AppUrl}}"><span class="glyphicon glyphicon-home"></span></a></li>
            <li><a href="{{.Post.Category.Link}}">{{i18n .Lang (print "category." .Post.Category.Name)}}</a></li>
            <li><a href="{{.Post.Topic.Link}}">{{.Post.Topic.Name}}</a></li>
        </ol>
        <div class="post-show">
            <div class="post-main">
                <div class="avatar pull-right">
                    <a href="{{.Post.User.Link}}" title="{{.Post.User.NickName}}">
                        <img class="large" src="{{.Post.User.AvatarLink64}}">
                    </a>
                </div>
                <h1 class="post-title">
                     {{.Post.Title}}<span id="post-best-flag" class="glyphicon glyphicon-bookmark color-red" style="{{if not .Post.IsBest}}display:none;{{end}}"></span>
                </h1>
                <div class="post-meta">
                    <a  class="tag" href="{{.Post.Category.Link}}">{{i18n .Lang (print "category." .Post.Category.Name)}}</a> • <a  class="tag" href="{{.Post.Topic.Link}}">{{.Post.Topic.Name}}</a> • {{i18n .Lang "post.post_author"}} <a  href="{{.Post.User.Link}}">{{.Post.User.NickName}}</a> • <span class="time">{{timesince .Lang .Post.Created}}</span>{{if .Post.Replys}}{{if .Post.LastReply}} • <span class="last-reply">{{i18n .Lang "post.last_reply"}} <a href="{{.Post.LastReply.Link}}">{{.Post.LastReply.NickName}}</a></span> • <span class="time">{{timesince .Lang .Post.LastReplied}}</span>{{end}}{{end}}
                </div>
            </div>
            {{if .flash.CanNotEditPost}}
                <div class="alert alert-warning" style="padding:5px;border-radius:0;">
                    {{i18n .Lang "post.post_edit_locked"}}
                </div>
            {{end}}
             
            {{if ne (datetime .Post.Updated) (datetime .Post.Created)}}
                <p class="post-meta post-meta-edit">
                    {{if .Post.LastAuthor}}<a  href="{{.Post.LastAuthor.Link}}">{{.Post.LastAuthor.NickName}}</a> • {{end}}{{i18n .Lang "post.modified_on"}} {{timesince .Lang .Post.Updated}} / {{.Post.Updated|datetimes}}
                </p>

            {{end}}
            {{if .IsLogin}}
            <div class="post-action">
                <div class="btn-group">
                    {{if eq .Post.User.Id .User.Id}}
                        {{if .Post.CanEdit}}
                        <a class="btn btn-danger btn-sm" href="{{.Post.Link}}/edit"><i class="icon icon-edit"></i>{{i18n .Lang "post.post_edit"}}</a>
                        {{end}}
                    {{end}}
                    {{if .User.IsAdmin}}
                        <a class="btn btn-warning btn-sm" href="javascript:void(0)" rel="toggle-post-best">{{if .Post.IsBest}}{{i18n .Lang "post.remove_best"}}{{else}}{{i18n .Lang "post.set_best"}}{{end}}</a>
                        <input type="hidden" id="remove-post-best-text" value='{{i18n .Lang "post.remove_best"}}'/>
                        <input type="hidden" id="set-post-best-text" value='{{i18n .Lang "post.set_best"}}'/>
                    {{end}}
                     <a class="btn btn-info btn-sm" href="javascript:void(0)" rel="toggle-post-fav">{{if .IsPostFav}}{{i18n .Lang "post.remove_fav"}}{{else}}{{i18n .Lang "post.set_fav"}}{{end}}</a>

                    <input type="hidden" id="remove-post-fav-text" value='{{i18n .Lang "post.remove_fav"}}'/>
                    <input type="hidden" id="set-post-fav-text" value='{{i18n .Lang "post.set_fav"}}'/>
                </div>
            </div>
            {{end}}
            <div class="post-content markdown">
                {{.Post.GetContentCache|str2html}}
            </div>
            <div class="post-share pull-right">
                {{template "post/component/share.html"}}
            </div>
            <span class="clearfix"></span>
        </div>
        <div class="post-comments"{{if .IsLogin}} data-user="{{.User.UserName}}"{{end}}>
            {{if .CommentsNum}}
                <div class="breadcrumb">
                    <div class="text-center">{{i18n .Lang "post.total_replies" .CommentsNum}}</div>
                </div>
            {{end}}
            {{if .CommentsNum}}
                {{range .Comments}}
                    <div id="reply{{.Floor}}" class="comment" data-user="{{.User.UserName}}" data-user-nick="{{.User.NickName}}" data-floor="{{.Floor}}">
                        <div class="avatar">
                            <a href="{{.User.Link}}">
                                <img src="{{.User.AvatarLink48}}">
                            </a>
                        </div>
                        <div class="content">
                            <div class="meta">
                                <a href="{{.User.Link}}">{{.User.NickName}}</a>
                                <span class="time">{{timesince $.Lang .Created}}</span>
                                <span class="pull-right">
                                <a href="#reply{{.Floor}}">{{i18n $.Lang "post.comment_floor" .Floor}}</a> 
                                {{if $.IsLogin}}
                                    <a rel="comment-reply" href="javascript:">{{i18n $.Lang "post.comment_reply"}} <i class="icon-reply"></i></a>
                                {{end}}
                                </span>
                            </div>
                            <div class="markdown">
                                {{.GetMessageCache|str2html}}
                            </div>
                        </div>
                        <span class="clearfix"></span>
                    </div>
                {{end}}
            {{else}}
                <div class="breadcrumb">
                    <div class="text-center">{{i18n .Lang "post.no_replies"}}</div>
                </div>
            {{end}}
        </div>
        <div class="box">
            <div class="">
                {{if not .IsLogin}}
                    <div class="text-center"><a href="{{loginto .Post.Link}}" class="btn btn-primary">{{i18n .Lang "auth.need_login_to_reply"}}</a></div>
                {{else if not .User.IsActive}}
                    <div class="text-center"><a href="{{.AppUrl}}settings/profile" class="btn btn-info">{{i18n .Lang "auth.need_active_to_reply"}}</a></div>
                {{else}}
                    <form id="post-reply" method="POST" action="{{.Post.Link}}#post-reply">
                        {{.xsrf_html}}{{.once_html}}
                        <div id="md-editor" class="markdown-editor"  data-preview-url="{{$.AppUrl}}api/md" data-savekey="post/comment">
                            {{with .CommentFormSets.Fields.Message}}
                                {{template "post/component/editor.html" dict "root" $ "Field" .Field "Error" .Error "Help" .Help}}
                            {{end}}
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary">{{i18n .Lang "submit"}}</button>
                        </div>
                    </form>
                {{end}}
            </div>
        </div>
    </div>
    <div id="sidebar" class="col-md-3">
        <p>
            <a href="{{.AppUrl}}new?topic={{.Post.Topic.Slug}}" class="btn btn-success">
                <i class="icon-double-angle-right"></i>
                {{i18n .Lang "post.post_new_with_topic" (.Post.Topic.Name)}}
            </a>
        </p>
    </div>
</div>
{{if .User.IsAdmin}}
<script type="text/javascript">
    (function($){
        var setPostBestText=$("#set-post-best-text").val();
        var removePostBestText=$("#remove-post-best-text").val();
        var postBestFlag=$("#post-best-flag");
        $(document).on('click', '[rel=toggle-post-best]', function(){
            var btn=$(this);
            var thisText=btn.text()
            $.post('/api/post', {action: 'toggle-best', post: '{{.Post.Id}}'}).complete(function(data){
                if(data.success){
                    if (thisText==setPostBestText){
                        btn.text(removePostBestText);
                        postBestFlag.show();
                    }else if(thisText==removePostBestText){
                        btn.text(setPostBestText)
                        postBestFlag.hide();
                    }
                }else{
                    window.location.reload();
                }
            });
        });
    })(jQuery);
</script>
{{end}}

{{if .IsLogin}}
<script type="text/javascript">
    (function($){
        var setPostFavText=$("#set-post-fav-text").val();
        var removePostFavText=$("#remove-post-fav-text").val();
        $(document).on('click', '[rel=toggle-post-fav]', function(){
            var btn=$(this);
            var thisText=btn.text();
            $.post('/api/post', {action: 'toggle-fav', post: '{{.Post.Id}}'}).complete(function(data){
                if(data.success){
                    if(thisText==setPostFavText){
                        btn.text(removePostFavText)
                    }else if(thisText==removePostFavText){
                        btn.text(setPostFavText)
                    }
                }else{
                    window.location.reload();
                }    
            });
        });
    })(jQuery);
</script>
{{end}}
{{end}}
<script type="text/javascript">
    (function($){
        $.postPage();
    })(jQuery);
</script>
